<template>
  <div class="system">
    <el-row class="m-b bg-white search-content">
      <div class="form-box">
        <SearchComp
          :searchData="searchData"
          :searchForm="searchForm"
          :searchHandle="searchHandle"
        ></SearchComp>
      </div>
    </el-row>
    <div
      class="infinite-list-wrapper bg-white"
      style="overflow: auto"
      v-loading="loading"
    >
      <ul class="list" infinite-scroll-disabled="disabled">
        <li v-for="(item, index) in tableData" :key="index" class="list-item">
          {{ item }}
        </li>
      </ul>
      <!-- <p v-if="loading">加载中...</p>
      <p v-if="noMore">没有更多了</p> -->
    </div>
  </div>
</template>

<script>
import { getSystemDictList } from "@/api/common";
import { getSystemLog } from "@/api/log.js";
export default {
  data() {
    return {
      total: 50,
      loading: false,
      tableData: [],
      searchForm: [
        {
          type: "Select",
          label: "服务:",
          prop: "path",
          filterable: true,
          options: [],
          params: {
            key: "sdeKey",
            value: "sdeValue",
          },
          change: () => this.initData(),
          placeholder: "请选择服务",
        },
      ],
      searchHandle: [
        {
          label: "重置",
          handle: () => this.reset(),
        },
      ],
      searchData: {
        path: "",
      },
    };
  },
  computed: {
    noMore() {
      return this.total >= 200;
    },
    disabled() {
      return this.loading || this.noMore;
    },
  },
  created() {
    this.getLogType();
  },
  methods: {
    initData() {
      this.loading = true;
      getSystemLog(this.searchData)
        .then((res) => {
          const { code, data, message } = res;
          if (code !== 200) {
            this.$message.error(message);
            return;
          }
          this.tableData = data;
          // this.total = res.total;
        })
        .catch((error) => {
          this.$message.error(error);
        })
        .finally(() => {
          this.loading = false;
        });
    },
    reset() {
      this.searchData.path = this.searchForm[0].options[0].sdeValue;
      this.initData();
    },
    getLogType() {
      getSystemDictList({
        systemDictName: "log_type",
      }).then((res) => {
        this.searchForm[0].options = res.data;
        this.searchData.path = res.data[0].sdeValue;
        this.initData();
      });
    },
  },
};
</script>

<style>
.system {
  min-height: 600px;
}
</style>
